<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home's Page Social Networking Photograph</title>
<link rel="stylesheet" type="text/css" href="/social/static/css/home.css" />
<link rel="stylesheet" type="text/css" href="/social/static/css/style2.css" />
<link rel="stylesheet" type="text/css" href="/social/static/css/skin.css" />
<link rel="stylesheet" type="text/css"
	href="/social/static/css/galleria.classic.css" />
<script language="javascript" type="text/javascript"
	src="/social/static/js/jquery.js"></script>
<script language="javascript" type="text/javascript"
	src="/social/static/js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript"
	src="/social/static/js/script.js"></script>
<script type="text/javascript" src="/social/static/js/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="/social/static/js/jquery.jcarousel.min.js"></script>
<script language="javascript" type="text/javascript"
	src="/social/static/js/galleria.classic.js"></script>
<script language="javascript" type="text/javascript"
	src="/social/static/js/galleria.classic.min.js"></script>
<style>
</style>
<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#mycarousel').jcarousel({
			vertical : true,
			scroll : 2
		});
	});
</script>
<script type="text/javascript">
	$(document).ready(function() {
		var buttons = {
			previous : $('#jslidernews2 .button-previous'),
			next : $('#jslidernews2 .button-next')
		};
		$('#jslidernews2').lofJSidernews({
			interval : 5000,
			easing : 'easeInOutQuad',
			duration : 1200,
			auto : true,
			mainWidth : 684,
			mainHeight : 300,
			navigatorHeight : 100,
			navigatorWidth : 310,
			maxItemDisplay : 3,
			buttons : buttons
		});
	});
</script>
<style>
ul.lof-main-wapper li {
	position: relative;
}
</style>
<script type="text/javascript">
	function mycarousel_initCallback(carousel) {
		// Disable autoscrolling if the user clicks the prev or next button.
		carousel.buttonNext.bind('click', function() {
			carousel.startAuto(0);
		});

		carousel.buttonPrev.bind('click', function() {
			carousel.startAuto(0);
		});

		// Pause autoscrolling if the user moves with the cursor over the clip.
		carousel.clip.hover(function() {
			carousel.stopAuto();
		}, function() {
			carousel.startAuto();
		});
	};

	jQuery(document).ready(function() {
		jQuery('#mycarousel').jcarousel({
			auto : 2,
			wrap : 'last',
			initCallback : mycarousel_initCallback
		});
	});
</script>
</head>

<body>

	<div id="main_wrapper">
		<div class="content">
			<div id="header">
				<a href="#"><img
					src="/social/static/images/header/background_header.png" alt="header image"
					style="width: 1000px; height: 102px;" /></a>
			</div>
			<!--End #header-->

			<div id="container">
				<h2>
					Hình Ảnh<strong> Hot </strong>Trong Tuần
				</h2>
				<p>Sau đây là những hình ảnh được người dùng chia sẽ và nhận nhiều lượt quan tâm nhất trong Tuần vừa qua</p>
				<!------------------------------------- THE CONTENT ------------------------------------------------->
				<div id="jslidernews2" class="lof-slidecontent"
					style="width: 980px; height: 300px;">
					<div class="preload">
						<div></div>
					</div>
					<div class="button-previous">Previous</div>

					<!-- MAIN CONTENT -->
					<div class="main-slider-content"
						style="width: 684px; height: 300px;">
						<ul class="sliders-wrap-inner">
							<c:forEach items="${weeklyMostView}" var="mostview">

								<li><img src="/social/static/Upload/${mostview.uuid}.png"
									title="Newsflash 1" />
									<div class="slider-description">
										<div class="slider-meta">
											<a target="_parent" title="Newsflash" href="#Category-1">/
												Newsflash/</a> <i> - Monday, February 15, 2010 12:42</i>
										</div>
										<h4>Nội dung của Newsflash</h4>
										<p>
											Tôi nghĩ rằng, chúng ta đã làm những việc sai trái đáng báo động cho cả thế giới này ! Chúng ta phải thay đổi ...<a
												class="readmore" href="#">Read more </a>
										</p>
									</div></li>
							</c:forEach>
						</ul>
					</div>
					<!-- END MAIN CONTENT -->
					<!-- NAVIGATOR -->
					<div class="navigator-content">
						<div class="navigator-wrapper">
							<ul class="navigator-wrap-inner">
								<c:forEach items="${weeklyMostView}" var="mostview">
									<li>
										<div>
											<img src="/social/static/Upload/${mostview.user.avatar}.png" />
											<h3>${mostview.user.name}</h3>
											<span class="txt_View">View = ${mostview.view}</span> <br />
											<span class="txt_Tilte">Title = ${mostview.content}</span>
										</div>
									</li>
								</c:forEach>
							</ul>
						</div>
					</div>
					<!----------------- END OF NAVIGATOR --------------------->
					<div class="button-next">Next</div>

					<!-- BUTTON PLAY-STOP -->
					<div class="button-control">
						<span></span>
					</div>
					<!-- END OF BUTTON PLAY-STOP -->

				</div>
			</div>
			<!--End #container-->

			<div class="tag_content">
				<div class="slideshow_small_left">
					<div class="tag_small">
						<h1 style="color: red;">Funny</h1>
						<div id="galleria">
							<c:forEach items="${funny}" var="funny">
								<a href="PhotoView/${funny.uuid}"> <img
									src="/social/static/Upload/${funny.uuid}.png" />
								</a>
							</c:forEach>
						</div>
						<!--End #galleria-->

					</div>
					<div class="tag_small">
						<h1 style="color: red;">Traffic</h1>
						<div id="galleria">
							<c:forEach items="${traffic}" var="traffic">
								<a href="PhotoView/${traffic.uuid}"> <img
									src="/social/static/Upload/${traffic.uuid}.png" />
								</a>
							</c:forEach>
						</div>
					</div>
					<div class="tag_small">
						<h1 style="color: red;">Family</h1>
						<div id="galleria">
							<c:forEach items="${family}" var="family">
								<a href="PhotoView/${family.uuid}"> <img
									src="/social/static/Upload/${family.uuid}.png" />
								</a>
							</c:forEach>
						</div>
					</div>
					<div class="tag_small">
						<h1 style="color: red;">Nature</h1>
						<div id="galleria">
							<c:forEach items="${nature}" var="nature">
								<a href="PhotoView/${nature.uuid}"> <img
									src="/social/static/Upload/${nature.uuid}.png" />
								</a>
							</c:forEach>
						</div>
					</div>
				</div>
				<div class="slideshow_small_right">
					<div class="wrap_border">
						<center>
							<h1 style="color: red;">New Picture</h1>
							<div id="wrap">
								<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
									<c:forEach items="${newest}" var="newest">
										<li><a href="PhotoView/${newest.uuid}"> <img
												src="/social/static/Upload/${newest.uuid}.png" width="75"
												height="75" alt="" />
										</a></li>
									</c:forEach>
								</ul>
							</div>
							<!--End #wrap-->
						</center>
					</div>
					<!--End .wrap_border-->

				</div>
				<!--End .slideshow_small_right-->
				<div class="clearAll"></div>
			</div>
			<div id="footer">
					<div class="footer_logo" style="float: left">
						<img src="/social/static/images/Logo_Application/Logo.png"
							style="height: 80px; width: 80px;" alt="Logo Application" />
					</div>
					<div class="footer_info" style="float: right">
						<p>Copy right by Phoenix Team</p>
						<p>The Photograph Social Networking</p>
					</div>

				</div>
			</div>
			<!--End .content-->
		</div>
		<!--End #main_wrapper-->
		<script>
			Galleria.loadTheme('/social/static/js/galleria.classic.min.js');
			Galleria.run('#galleria');
		</script>
</body>
</html>